import { BasicColumn, FormSchema } from '@/components/Table';
import { h } from 'vue';
import { Image, Popconfirm, Tag } from 'ant-design-vue';

import { useMessage } from '@/hooks/web/useMessage';
import { getDeliveryApi } from '@/api/sys/sysOrder';
import { VxeFormItemProps, VxeGridPropTypes } from '@/components/VxeTable';

type CheckedType = boolean | string | number;

export const searchFormSchema: FormSchema[] = [
  {
    field: 'userName',
    label: '姓名',
    component: 'Input',
    colProps: { span: 6 },
  },
  {
    field: 'goodName',
    label: '商品名称',
    component: 'Input',
    colProps: { span: 6 },
  },
  {
    field: 'status',
    label: '状态',
    component: 'Select',
    colProps: { span: 6 },
    componentProps: {
      options: [
        { label: '全部', value: '' },
        { label: '待取货', value: 0 },
        { label: '已取货', value: 1 },
        { label: '订单准备中', value: 2 },
        { label: '已取消', value: 99 },
      ],
    },
  },
];

export const sendGoodFormSchema: FormSchema[] = [
  {
    label: '物流公司',
    field: 'dvyCode',
    component: 'ApiSelect',
    componentProps: {
      api: getDeliveryApi,
      // mode:"multiple",
      resultField: 'data',
      labelField: 'dvyName',
      valueField: 'dvyCode',
    },
    required: true,
  },
  {
    label: '物流单号',
    field: 'dvyFlowId',
    component: 'Input',
    required: true,
  },
];

export const vxeTableColumns: VxeGridPropTypes.Columns = [
  // {
  //   title: '序号',
  //   type: 'seq',
  //   fixed: 'left',
  //   width: '50',
  //   align: 'center',
  // },
  { type: 'expand', width: 40, slots: { content: 'expand_content' } },

  {
    title: '订单编号',
    width: 150,
    field: 'transactionNo',
  },

  {
    title: '付款总金额',
    width: 100,
    field: 'totalPrice',
    align: 'center',
  },
  {
    title: '订单状态',
    width: 100,
    field: 'orderStatus',
    showOverflow: 'title',
    slots: {
      default: ({ row }) => {
        let obj = getOrderStatus(row);
        let value = obj.text;
        let color = obj.color;
        return h(
          Tag,
          {
            color,
          },
          () => value,
        );
      },
    },
  },
  {
    title: '订单来源',
    width: 100,
    field: 'source',
    showOverflow: 'title',
    slots: {
      default: ({ row }) => {
        let obj = getSource(row);
        let value = obj.text;
        let color = obj.color;
        return h(
          Tag,
          {
            color,
          },
          () => value,
        );
      },
    },
  },
  {
    title: '商品名称',
    field: 'goodNames',
    width: 200,
  },
  {
    title: '商品数量',
    width: 80,
    field: 'goodNums',
    align: 'center',
  },
  {
    title: '收货人',
    width: 100,
    field: 'receiver',
    align: 'center',
  },
  {
    title: '收货人手机',
    width: 100,
    field: 'cellPhone',
    align: 'center',
  },
  {
    title: '省',
    width: 100,
    field: 'provinceName',
    align: 'center',
  },
  {
    title: '市',
    width: 100,
    field: 'cityName',
    align: 'center',
  },
  {
    title: '县/区',
    width: 100,
    field: 'districtName',
  },
  {
    title: '地址',
    width: 150,
    field: 'address',
    showOverflow: 'title',
  },
  // {
  //   title: '图片',
  //   field: 'img',
  //   showOverflow: 'title',
  //   width: 150,
  //   slots: {
  //     default: ({ row }) => {
  //       const img = row.img;
  //       return h(Image, {
  //         "width":50,
  //         "height":50,
  //         "src":img
  //       } );
  //     },
  //   },
  // },

  {
    title: '用户备注',
    field: 'remarks',
    width: 100,
  },
  {
    title: '付款时间',
    field: 'payTime',
    width: 130,
  },
  {
    width: 150,
    title: '操作',
    align: 'center',
    slots: { default: 'action' },
    fixed: 'right',
  },
];

export const vxeTableFormSchema: VxeFormItemProps[] = [
  {
    span: 6,
    field: 'keyword',
    title: '查询',
    itemRender: {
      name: 'AInput',
      props: {
        placeholder: '姓名/手机/单号',
      },
    },
  },
  {
    span: 6,
    // offset: 2,
    field: 'orderStatus',
    title: '订单状态',
    itemRender: {
      name: 'ASelect',
      // defaultValue: 2,
      props: {
        style: { width: '100%' },
        options: [
          { label: '待付款', value: 1 },
          { label: '待发货', value: 2 },
          { label: '待收货', value: 3 },
          { label: '待评价', value: 4 },
          { label: '成功', value: 5 },
          { label: '关闭', value: 6 },
        ],
      },
    },
  },
  {
    span: 6,
    // offset: 2,
    field: 'source',
    title: '订单来源',
    itemRender: {
      name: 'ASelect',
      // defaultValue: 2,
      props: {
        style: { width: '100%' },
        options: [
          { label: '微信商城', value: 1 },
          { label: '线下创建', value: 2 },
        ],
      },
    },
  },
  {
    span: 6,
    itemRender: {
      name: 'VxeButtonGroup',
      options: [
        { type: 'reset', content: '重置' },
        { type: 'submit', content: '查询', status: 'primary' },
      ],
    },
  },
];

export function getOrderStatus(row) {
  let result = {
    text: '',
    color: '',
    closeTypeValue: '',
  };
  const closeType = row.closeType;
  switch (closeType) {
    case 1:
      result.closeTypeValue = '超时自动取消';
      break;
  }
  let value = '';
  let color = '';
  switch (row.orderStatus) {
    case 1:
      result.text = '待付款';
      break;
    case 2:
      result.text = '待发货';
      result.color = 'orange';
      break;
    case 3:
      result.text = '待收货';

      break;
    case 4:
      result.text = '待收货';
      break;
    case 5:
      result.text = '成功';
      result.color = 'green';
      break;
    case 6:
      result.text = '关闭';
      if (result.closeTypeValue) {
        result.text += `(${result.closeTypeValue})`;
      }
      break;
  }
  return result;
}

export function getSource(row) {
  let result = {
    text: '',
    color: '',
  };

  let value = '';
  let color = '';
  switch (row.source) {
    case 1:
      result.text = '微信商城';
      break;
    case 2:
      result.text = '线下创建';
      break;
  }
  return result;
}

export const childColumns = [
  {
    title: '商品名称',
    dataIndex: 'goodName',
    key: 'goodName',
  },
  {
    title: '图片',
    dataIndex: 'pic',
    key: 'pic',
    slots: { customRender: 'pic' },
    width: 120,
  },
  // {
  //   title: '规格',
  //   dataIndex: 'specification',
  //   key: 'specification',
  //   slots: { customRender: 'specification' },
  //
  // },
  {
    title: '规格组1',
    dataIndex: 'specGroupName1',
    key: 'specGroupName1',
    width: 100,
  },
  {
    title: '规格值1',
    dataIndex: 'specGroupValue1',
    key: 'specGroupValue1',
    width: 100,
  },
  {
    title: '规格组2',
    dataIndex: 'specGroupName2',
    key: 'specGroupName2',
    width: 100,
  },
  {
    title: '规格值2',
    dataIndex: 'specGroupValue2',
    key: 'specGroupValue2',
    width: 100,
  },
  {
    title: '单价',
    dataIndex: 'goodPrice',
    key: 'goodPrice',
    width: 100,
  },

  {
    title: '数量',
    dataIndex: 'payCount',
    key: 'payCount',
    width: 120,
  },
];

export const pathColumns = [
  {
    title: '物流轨迹',
    dataIndex: 'action_msg',
    key: 'action_msg',
  },
  {
    title: '时间',
    dataIndex: 'action_time_value',
    key: 'action_time_value',
    width: 180,
  },
];
